<template>
  <div class="teslog wp-1 h-26">
    <div style="height:300px;width:420px" id="char2" ref="chart2" class="wp-1 hp-1"></div>
  </div>
</template>

<script>
import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud.min";
export default {
  data() {
    return {
      //定义需要展示的词语和数值（数值越大，字体会越大）
      worddata: [
        {
          name: "小汤同学",
          value: 48,
        },
        {
          name: "python",
          value: 2,
        },
        {
          name: "python",
          value: 4,
        },
        {
          name: "python",
          value: 5,
        },
        {
          name: "javascript",
          value: 7,
        },
        {
          name: "java",
          value: 8,
        },
        {
          name: "python",
          value: 9,
        },
        {
          name: "python",
          value: 10,
        },
        {
          name: "python",
          value: 11,
        },
        {
          name: "汤同学",
          value: 12,
        },
        {
          name: "同学",
          value: 14,
        },
        {
          name: "python",
          value: 15,
        },
        {
          name: "python",
          value: 17,
        },
        {
          name: "python",
          value: 19,
        },
        {
          name: "python",
          value: 21,
        },
        {
          name: "python",
          value: 22,
        },
        {
          name: "python",
          value: 24,
        },
        {
          name: "python",
          value: 27,
        },
        {
          name: "python",
          value: 31,
        },
        {
          name: "python",
          value: 33,
        },
      ],
    };
  },
  mounted() {
    this.initCharts(); //调用定义词云图方法
  },
  methods: {
    //定义词云图并插入容器内
    initCharts() {
      let myChart2 = this.$echarts.init(this.$refs.chart2);
      let dou_live_word_result = this.worddata;
      myChart2.setOption({
        title: {
          x: "center",
        },
        backgroundColor: "",

        series: [
          {
            name: "2222",
            type: "wordCloud",
            shape: "circle",
            rotationRange: [0, 0], //字体旋转的角度
            sizeRange: [10, 50], //字体大小的范围
            gridSize: 20, //字体分布的密集程度
            // maskImage: maskImage,//字体以图片形状分布，支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
            left: "center",
            top: "center",
            right: null,
            bottom: null,
            width: "100%",
            height: "100%",
            textStyle: {
              normal: {
                fontFamily: "sans-serif",
                //fontWeight: 'bold',
                // Color can be a callback function or a color string
                color: function () {
                  // Random color
                  return (
                    "rgb(" +
                    [
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160),
                    ].join(",") +
                    ")"
                  ); //字体的随机颜色
                },
              },
              emphasis: {
                //鼠标移入的特效样式
                shadowBlur: 10,
                shadowColor: "#333",
              },
            },
            data: dou_live_word_result,
          },
        ],
      });
        myChart2.on('click',function(params){
          console.log(params)
        })
      // myChart2.on('click', 'eConsole');

    },

  },
};
</script>

<style lang='scss' scoped>
#char2 {
  margin: 50px auto;
  background: pink;
  background: url('../../src/image/focusbackground.png');
  background-size: 100% 100%;
}
</style>
